1. Field of the Invention
Embodiments of the present invention relate to the field of web based control components. More particularly, embodiments of the present invention relate to button and tab control components for display within the context of a hypertext markup language based web page.
2. Related Art
Network environments allow a worldwide collection of networks (e.g., the Internet) and users on those networks to communicate with each other. Users accessing the Internet through a web browser can access and interact with content from web sites that are located on the Internet. Web sites located on the Internet comprise a group of related documents, associated files, script routines, and databases. A server manages and controls the websites that are associated with the server to present content within the websites to the accessing users.
The standardized Hypertext Markup Language (HTML) can be used for creating documents that are supported by various platforms (operating system and web browser) on the Internet. The HTML uses tags to mark elements (e.g., text and graphics) in a document to indicate how a web browser should display those elements. As such, a web page coded in HTML will generally be presented to a user similarly across various platforms.
In addition, HTML tags indicate how components within the web page should respond to actions by a user (e.g., mouse clicks). User interactions with components in a web page across the various platforms will generally have the same effect. Within the context of an HTML web page, user interface control components can be implemented for interaction between the web page and content within the web page. The control components are also known as widgets in some circles. Standard button and tab control components based in HTML can be implemented within the HTML web page for user interaction. For example, button control components can contain text for requesting an action, such as, “OK,” “CANCEL,” “SAVE,” etc. Tab control components can contain text that when selected requests an associated page or window to be displayed. The text contained within the button or tab control component may be comprised of multiple words, e.g., “Save All Changes.”
It can be desired that web pages be designed to have a particular style and format. A web page that is designed to have the same alignment and display presentation can be especially powerful for marketing purposes. For example, by preserving the presentation and format of its company web page across the various platforms that access and support the Internet, name brand recognition can be reinforced as users are presented with web pages that are consistent in presentation across whatever platform the user implements to access the Internet.
Unfortunately, within the context of HTML, button and tab components are affected by localization into foreign languages and user preferences. Localization of a web page involves altering the web page so that it is appropriate for use within a different country. In one case, this involves translating action text associated with a button or tab component. Depending on which language is used, the button or tab component may grow or shrink in size throwing off the alignment of graphics, text, and components within a web page. An action text translated from English may be increased to contain more words. As such, an HTML button or tab would increase in the horizontal direction to accommodate the increase in the number of words. As a result, horizontal scroll bars may be presented since the web page may be extended further in the horizontal direction.
Similarly, an HTML button or tab component may occupy more space in the vertical direction if the action text is translated to a language using characters or symbols for words (e.g., Chinese characters). Buttons or tabs that are in a line across a web page may come out of alignment, as some of the component may require translation and others not. In that case, components that are translated to characters may be taller vertically, and components that are not translated would not become taller, thereby throwing off vertical alignment.
Furthermore, user preferences for text size also will affect alignment and size of components within a web page. Button and tab components will extend in the horizontal and vertical directions to accommodate for increased size of text within a button or tab component. While web pages written in HTML will alter and flow the content to accommodate for increased size, page resizing is not generally performed. A component with text that has increased font size will increase in the vertical direction to accommodate for the increased size. This may be the case even though the web page may have empty space in the vertical direction. In that case, horizontal and vertical scroll bars would be presented prematurely to accommodate for the increased size of the component.
Similarly, it may be desired to have a web page that interacts with users in a similar fashion across the various platforms that support the Internet. In this way, users that are familiar with how to interact with components within a web page can interact with the same components in a consistent manner across the various platforms. There is no need to relearn what each component is supposed to do just because it is presented differently. As such, interactive consistency can help a web page distinguish its services from other web pages.
One approach in the prior art describes a display button for a web page integrating both a graphic pictorial image with character based textual information (with link) into a single iconic button in U.S. Pat. No. 5,986,654, “System and Method for Rendering On-Screen Iconic Buttons with Dynamic Textual Link,” to Alexander. The display button is preferably represented in a table structure within HTML. The table structure contains two end cells which display graphic images therein. In between the end cells is inserted a display region displaying character based text. Also, thin horizontal row cells are colored to match the end cells and to create an outer boundary or edge image to help render a three-dimensional push button. Multiple upper display regions form the top of the push button and multiple lower display regions form the bottom push button. The text display region is surrounded by the end cells and the upper and lower display regions.
A problem with the Alexander patent is illustrated in Prior Art FIGS. 11A and 11B. While the upper and lower display regions and the text display region automatically expand or contract to accommodate the size of the textual link placed within the text region, the graphical images in the end cells are unable to accommodate for the stretching and contraction. Prior Art FIG. 11A is a diagram of a push button 1100 with one line of text 1110 within the text display region 1115. The graphical images within the two end cells form the curved right 1130 and left 1120 sides of the push button 1100.
Unfortunately, when the push button 1100 of Prior Art FIG. 11A expands, the graphical images that form the right 1130 and left 1120 curves within the two end cells are unable to accommodate for the expansion. Prior Art FIG. 11B illustrates the problem associated with displaying the graphical images within the end cells when the text display region has expanded. The push button 1100 has expanded to include two lines of text 1140 and 1150. However, the rounded half circles 1120 and 1130 representing the ends of the button remain the same size as in Prior Art FIG. 11A. The rounded half circles 1120 and 1130 as graphical images are unable to expand to accommodate for the expansion of the display region, the horizontal upper region, and the lower display region, without adding new graphical images. As such, the two ends are no longer completely rounded. The left side includes lines 1125A and 1125B to accommodate for the expansion within the display and horizontal upper and lower display regions. Also, the right side includes lines 1135A and 1135B to accommodate for the expansion.
Moreover, within the context of HTML, standard button components are not presented consistently across the various platforms that support access to the Internet. The operating system and web browser that is used to access the Internet will determine how a button or tab component will be presented. For example, the shape of the particular component will vary across the various platforms. A button presented on an Apple Macintosh platform will not look the same as a button presented on a Microsoft Windows platform. Similarly, the colors of a particular component will be determined by the platform being used to access the Internet.